<!DOCTYPE html>
<html lang="cn" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>管理员登录</title>
    <script src="/js/vue.global.js"></script>
    <script src="/js/axios.min.js"></script>
    <style>
        *{
            font-family: 幼圆;
            margin: 0 auto;

        }
        body {
            background-image: url('img/bizhi.jpg');
            background-repeat: no-repeat; /* 背景图片不重复 */
            background-size: cover; /* 背景图片覆盖整个元素 */
            background-position: center; /* 背景图片居中 */
        }
        #text-a{
            float: right;
            margin-top: 200px;
            margin-right: 100px;
            width: 400px;
            height: 250px;
            background-color: white;
            font-size: 20px;
            /*border-radius: 18px;*/
            color: rgb(45, 154, 31);
        }
        .text-input{
            margin-left: 80px;
            margin-top: 10px;
        }
    </style>
</head>
<body id="app">
<div id="text-a">
    <h3 style="margin-left: 140px;padding-top: 25px">管理员登录</h3>
    <div class="text-input">管理员：<input type="text" name="username" id="username"><br></div>
    <div class="text-input">密&nbsp;&nbsp;码：<input type="text" name="password" id="password"><br></div>
<button v-on:click="this.adminLogin()" style="margin-left: 80px;width: 230px;height: 30px;margin-top: 20px;background-color: rgb(45, 154, 31);border-radius: 5px;border: none;color: white">登录</button>
</div>
<script>
    //定义app
    const app = {

        //数据绑定
        data() {
            return {}
        },
        //事件绑定
        methods: {
            //客户登录
            adminLogin: function () {
                axios({
                    method: "post", url: "/adminLogin", data: {
                        username:document.getElementById("username").value,
                        password:document.getElementById("password").value
                    }
                }).then((response) => {
                    if(response.data==="ok"){
                        alert("登录成功！")
                        window.location.href="/admin/admin.html"
                    }else {
                        alert(response.data)
                    }
                });
            }
        },

        //构造方法
        mounted() {
            console.log("vue启动成功！")
        }
    }

    //启动app
    Vue.createApp(app).mount("#app")
</script>
</body>
</html>